<template>
  <div class="commonLeftRightFlex">
    <div
      class="common-left"
      v-resize-drag:right
      :style="
        'background-color:' + this.leftBackgroundColor + ';width:' + leftWidth
      "
    >
      <div class="line-box"></div>
      <slot name="left"> </slot>
    </div>
    <div
      class="common-right"
      :style="'background-color:' + this.rightBackgroundColor + ';'"
    >
      <slot name="right"></slot>
    </div>
  </div>
</template>
<script>
export default {
  name: "commonLeftRightFlex",
  directives: {
    resizeDrag: require("../../../utli/resizeDrag").default,
  },
  props: {
    leftWidth: {
      default: "425px",
      type: String,
    },
    leftBackgroundColor: {
      default: "#fff",
      type: String,
    },
    rightBackgroundColor: {
      default: "",
      type: String,
    },
  },
};
</script>
<style scoped>
.commonLeftRightFlex {
  width: 100%;
  height: 100%;
  display: flex;
}

.commonLeftRightFlex .common-left {
  position: relative;
  height: 100%;
  overflow: hidden;
  margin-right: 16px;
  min-width: 10px !important;
}

.commonLeftRightFlex .common-left .line-box {
  width: 10px;
  height: 12px;
  position: absolute;
  right: 0px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9;
  cursor: ew-resize;
}

.commonLeftRightFlex .common-left .line-box:before {
  content: "";
  width: 1px;
  height: 100%;
  background-color: #aaa;
  display: inline-block;
  transform: scale(1.5);
}

.commonLeftRightFlex .common-left .line-box:after {
  content: "";
  width: 1px;
  height: 100%;
  background-color: #aaa;
  display: inline-block;
  transform: scale(1.5);
  margin-left: 4px;
}

.commonLeftRightFlex .common-left ::v-deep > div:nth-child(2) {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  height: 100%;
}

.commonLeftRightFlex .common-right {
  flex: 1;
  overflow: hidden;
  display: flex;
}

.commonLeftRightFlex .common-right ::v-deep .right {
  overflow: hidden;
}
</style>
